    // 案例 - 瀑布流

    // 0. 获取元素
    const uls = document.querySelectorAll('.content > ul')
    const select = document.querySelector('select')

    let flag = true

    // 1. 准备一个函数, 找到高度最短的 ul
    function getMinUl() {
      // 找到最短的 ul
      // 假设 [0] 的 ul 最短
      let min = uls[0]

      // 循环遍历每一个
      for (let i = 0; i < uls.length; i++) {
        // 判断高度
        if (uls[i].offsetHeight < min.offsetHeight) {
          min = uls[i]
        }
      }

      // 返回这个元素节点
      return min
    }

    // 2. 请求第一页的数据渲染
    // 将来滑到底部的时候, 需要加载第二页渲染
    // 把这个请求封装成函数
    // 2-1. 准备一个请求相关的数据
    const info = {
      include_fields: 'top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count',
      filter_id: '美食菜谱',
      start: 0,
      _: new Date().getTime()
    }
    // 2-2. 请求的函数
    getList()
    async function getList() {
      // 直接发送请求
      const res = await pAjax({
        url: '/dt',
        data: querystringify(info),
        dataType: 'json'
      })

      // 修改 info 内的 start 信息
      info.start = res.data.next_start

      // 使用 res.data.object_list 渲染页面
      res.data.object_list.forEach(item => {
        // 计算出每一个图片应该占据的高度
        // 提前给设置好
        /*
            真实高      真实宽
          --------- = -------
            设置高      设置宽
            设置高 = 真实高 * 设置宽 / 真实宽
        */
        const height = item.photo.height * 280 / item.photo.width

        // 每一个 item 生成一个 li 结构
        const str = `
          <li>
            <div style="height: ${ height }px" class="show">
              <img src="${ item.photo.path }" alt="">
            </div>
            <div class="info">
              <p>${ item.msg }</p>
              <p class="avatar">
                <img src="${ item.sender.avatar }" alt="">
              </p>
            </div>
          </li>
        `

        // 找到一个最短的 ul
        const ul = getMinUl()

        // 把这个 li 追加到 ul 内部
        ul.innerHTML += str
      })

      // 可以加载下一页了
      flag = true
    }


    // 3. 在需要的时候加载第二页
    window.onscroll = function () {
      // 3-1. 最短的 ul 底边进入页面以后, 在加载第二页
      // 当 屏幕的高 + 卷去的高 >= ul 的高 + ul 的上方偏移量
      // 表示 ul 的底边进入页面了, 该加载下一页了
      // DOM 级别获取可视窗口的高
      const window_height = document.documentElement.clientHeight
      // 浏览器卷去的高度
      const window_top = document.documentElement.scrollTop || document.body.scrollTop
      const minUl = getMinUl()
      // ul 的 内容 + padding + border 的高度
      const ul_height = minUl.offsetHeight
      // ul 距离定位父级的上方偏移量
      const ul_top = minUl.offsetTop

      // 判断不需要加载的情况
      if (ul_height + ul_top > window_height + window_top) return

      // 判断开关
      if (flag === false) return

      // 代码能执行到这里, 说明开关是开启的
      // 会加载下一页数据
      flag = false

      // 应该加载下一页了
      // 能不能直接调用
      // 异步操作, 会同时调用多次 getList(), 等到请求回来, 会加载很多页数据
      getList()
    }

    // 4. 切换分类
    select.onchange = function () {
      // 拿到你切换成什么了, 赋值给 info 的 filter_id
      info.filter_id = this.value

      // 需要把请求开始索引 start 变成 0
      info.start = 0

      // 把所有 ul 情况
      for (let i = 0; i < uls.length; i++) {
        uls[i].innerHTML = ''
      }

      // 请求数据渲染页面
      getList()
    }